<template>
  <div class="bg-white rounded-lg shadow-md p-6 mb-6">
    <div class="flex items-start space-x-4">
      <UserAvatar :user="currentUser" size="md" />
      
      <div class="flex-1">
        <textarea
          v-model="content"
          placeholder="分享你的想法..."
          class="w-full border border-gray-300 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
          rows="3"
        ></textarea>
        
        <div class="flex justify-between items-center mt-3">
          <div class="flex space-x-2">
            <button type="button" class="text-gray-500 hover:text-blue-500 transition">
              <i class="fas fa-image text-lg"></i>
            </button>
            <button type="button" class="text-gray-500 hover:text-blue-500 transition">
              <i class="fas fa-video text-lg"></i>
            </button>
            <button type="button" class="text-gray-500 hover:text-blue-500 transition">
              <i class="fas fa-link text-lg"></i>
            </button>
          </div>
          
          <button
            :disabled="isPosting || !content.trim()"
            class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-md transition duration-300"
            @click="handlePost"
          >
            {{ isPosting ? '发布中...' : '发布' }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { useAuthStore } from '@/store/modules/auth'
import { usePostStore } from '@/store/modules/post'
import UserAvatar from '@/components/user/UserAvatar.vue'

export default {
  components: {
    UserAvatar
  },
  
  setup() {
    const authStore = useAuthStore()
    const postStore = usePostStore()
    
    const content = ref('')
    const isPosting = ref(false)
    
    const currentUser = computed(() => authStore.currentUser)
    
    const handlePost = async () => {
      if (!content.value.trim() || isPosting.value) return
      
      isPosting.value = true
      
      try {
        await postStore.createPost({ content: content.value })
        content.value = ''
        // 刷新帖子列表
        await postStore.fetchPosts()
      } catch (error) {
        console.error('Error creating post:', error)
        // 显示错误提示
      } finally {
        isPosting.value = false
      }
    }
    
    return {
      content,
      isPosting,
      currentUser,
      handlePost
    }
  }
}
</script>